<input hidden="hidden" id="navValue" value="banner管理">

<div class="page-content">
    <div class="page-header">
        <h1>
            界面管理
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                banner管理
            </small>

<!--            <label style="float: right"><form action="" method="get">-->
<!--                    <input type="search" name="keywords" style="height: 35px;" class="input-sm" placeholder="手机号码" aria-controls="dynamic-table" value="">-->
<!---->
<!--                    <button id="searchBtn" type="submit" class="dt-button buttons-collection buttons-colvis btn btn-white btn-primary btn-bold" tabindex="0" aria-controls="dynamic-table" data-original-title="" title="搜索"><span><i class="fa fa-search bigger-110 blue"></i></span></button></form></label>-->

        </h1>
    </div><!-- /.page-header -->

    <div class="row">
        <from class="form-horizontal user-data" role="form"  method= "post" enctype ="multipart/form-data">
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> Banner标题: </label>

                <div class="col-sm-8">
                    <input type="text" name="title" placeholder="banner标题" class="col-xs-8" value="">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> Banner链接: </label>

                <div class="col-sm-8">
                    <input type="text" name="link" placeholder="Banner链接" class="col-xs-8" value="">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> Banner描述: </label>

                <div class="col-sm-8">
                    <input type="text" name="desc" placeholder="Banner描述" class="col-xs-8" value="">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> Banner图片: </label>

                <div class="col-sm-8">
                    <div class="widget-main col-sm-8">
                        <div class="form-group">

                            <label class="ace-file-input">
                                <input type="file" id="selectFile">
                                <span class="ace-file-container" data-title="选择图片">
                                        <span class="ace-file-name" data-title="请选择图片">
                                            <i class=" ace-icon fa fa-upload"></i>
                                        </span>
                                    </span>
                                <a class="remove" href="#">
                                    <i class=" ace-icon fa fa-times"></i>
                                </a>
                            </label>
                        </div>

<!--                        <div class="form-group">-->
<!--                            <label class="ace-file-input ace-file-multiple">-->
<!--                                <input multiple="" id="selectImage" type="file">-->
<!--                                <span class="ace-file-container" data-title="选择上传图片">-->
<!--                                        <span class="ace-file-name" data-title="未选择图片">-->
<!--                                            <i class=" ace-icon ace-icon fa fa-cloud-upload"></i>-->
<!--                                        </span>-->
<!--                                    </span>-->
<!--                                <a  class="remove" href="#">-->
<!--                                    <i class=" ace-icon fa fa-times"></i>-->
<!--                                </a>-->
<!--                            </label>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>

            <div class="form-group" id="show-img-div" style="display: none">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"></label>

                <div class="col-sm-8">
                    <div class="widget-main col-sm-8">
                        <img  src="" id="showImage" src="" style="width: 100%;" alt="">
                    </div>
                </div>
            </div>



            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 是否启用: </label>

                <div class="col-sm-8">
                    <label style="padding-top: 5px;">
                        <input name="switch-field-1" class="ace ace-switch ace-switch-1 statusValue" checked type="checkbox">
                        <span class="lbl"></span>
                    </label>
                </div>
            </div>

            <div class="col-md-offset-3 col-md-9">
                <div class="col-sm-3">
                    <button class="btn btn-info addBtn" type="button">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        确认
                    </button>
                </div>

                <div class="col-sm-2">
                    <button class="btn" type="reset">
                        <i class="ace-icon fa fa-undo bigger-110"></i>
                        取消
                    </button>
                </div>
            </div>
        </from>

    </div><!-- /.row -->
</div>

<script>
    $(".addBtn").click(function () {
        var title = $("input[name='title']").val();
        var link = $("input[name='link']").val();
        var desc = $("input[name='desc']").val();
        var img = $("#showImage").attr('src');
        var status = $(".statusValue").is(":checked") ? 1 : 0;
        if(!title){
            layer.msg('请填入图片展示标题');
            return false;
        }
        if(!link){
            layer.msg('请填入图片链接');
            return false;
        }
        if(!desc){
            layer.msg('请填入图片描述');
            return false;
        }
        if(!img){
            layer.msg('请选择图片');
            return false;
        }
        var data = {title:title,link:link,desc:desc,img:img,status:status};

        $.post(location.href,data,function (json) {
            layer.msg(json.info);
        },'json');
    });

    $("#selectImage").change(function () {
        run(this, function (data) {
            $('#showImage').attr('src', data);
            $("#show-img-div").show();
            uploadImage();
        });
    });

    $("#selectFile").change(function () {
        var file = this.files[0];
        var fm = new FormData();
        fm.append('file', file);
        layer.load(2);
        $.ajax({
            url : "{:url('banner/upload')}",
            type : "POST",
            data : fm,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            success:function (json) {
//                json = JSON.parse(json);
                if(json.status){
                    $('#showImage').attr('src', json.data);
                    $("#show-img-div").show();
                    layer.closeAll('loading');
                }
                layer.msg(json.info);
            }
        });
    });

    function run(input_file, get_data) {
        /*input_file：文件按钮对象*/
        /*get_data: 转换成功后执行的方法*/
        if (typeof (FileReader) === 'undefined') {
            alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
        } else {
            try {
                /*图片转Base64 核心代码*/
                var file = input_file.files[0];
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                if (!/image\/\w+/.test(file.type)) {
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function () {
                    get_data(this.result);
                }
                reader.readAsDataURL(file);
            } catch (e) {
                alert('图片转Base64出错啦！' + e.toString())
            }
        }
    }
    
    function uploadImage() {
        var image_base64 = $("#showImage").attr('src');
        $.post("{:url('banner/upload_base64')}",{file:image_base64},function (json) {
            if(json.status){

            }
            layer.msg(json.info);
        },'json');
    }
</script>